import {defineComponent, Teleport, ref, computed, provide,} from "vue";
import {NButton, NIcon,} from "naive-ui"
import {CloseOutlined,} from "@vicons/antd"
import {MdRefresh, MdClose,} from "@vicons/ionicons4"
import {FullscreenTwotone, ArrowBackRound,} from "@vicons/material"
import {nanoid} from 'nanoid'

/*
* 思路来源：http://admin-react-antd.eluxjs.com/
* 多个弹窗，只显示最后一个的内容，支持后退和全屏
* */

interface modelItemType {
    id: string,  // 代表数据的唯一ID
    title: Function | String,   // 标题可以是文字，也可以是函数返回jsx
    content: Function,   // 内容必须是函数，返回jsx
    footer?: Function | undefined,   // 底部操作区，可以是函数返回jsx，或者没有
    onOK?: Function | undefined,      // 点击确定按钮
    onCancel?: Function | undefined,        // 点击取消按钮
    okText?: String | undefined,  // 确认按钮文字
    cancelText?: String | undefined,    // 取消文字
    loading?: boolean,  // 加载状态
    refreshFunc?:Function | undefined,   // 刷新方法
}

export default defineComponent({
    name: "mymodel",
    setup(_p, {slots}) {

        const isfullscreen = ref(false)
        const defaultItem: modelItemType = {
            id: "",
            title: "",
            content: () => {
            },
            loading: false,
            okText: "确 定",
            cancelText: "取 消",
        }
        const modelList = ref<Array<modelItemType>>([])   // 所有弹窗的列表
        const lastmodel = computed(() => {
            if (modelList.value.length > 0) {
                return modelList.value[modelList.value.length - 1]
            } else {
                return null
            }
        })
        // 删除最后一个弹窗元素
        const removeLastModel = () => {
            if (modelList.value.length === 1) {
                modelList.value = []
                isfullscreen.value = false
            } else {
                modelList.value.splice(modelList.value.length - 1, 1)
            }
        }
        // 清空列表
        const clearmodellist=()=>{
            modelList.value = []
            isfullscreen.value = false
        }
        // 点击确定按钮
        const handleClick1 = () => {
            const result = lastmodel.value?.onOK && lastmodel.value?.onOK()
            if (result === undefined || result === null || result) {
                removeLastModel()
            }
        }
        // 点击取消按钮
        const handleClick2 = () => {
            const result = lastmodel.value?.onCancel && lastmodel.value?.onCancel()
            if (result === undefined || result === null || result) {
                removeLastModel()
            }
        }
        // 点击全屏
        const setFullscreen=()=>{
            isfullscreen.value = !isfullscreen.value
        }
        // 点击刷新
        const  shauxin=()=>{
            lastmodel.value?.refreshFunc && lastmodel.value?.refreshFunc()
        }

        // 向列表添加新的弹窗,生成唯一ID，删除的时候根据唯一ID删除
        const addModelItem = (Item: modelItemType): modelItemType => {
            const itemid = nanoid()
            const item = {
                ...defaultItem, ...Item, id: itemid, destroy: () => {
                    modelList.value.forEach((item, index) => {
                        if (item.id === itemid) {
                            modelList.value.splice(index, 1)
                        }
                    })
                }
            }
            modelList.value.push(item)
            // 将完整的实例返回
            return modelList.value[modelList.value.length - 1]
        }

        // 将添加方法注入到所有子元素当中
        provide("addModelItem", addModelItem)
        return () => (
            <div class="w-full h-full">
                {slots.default ? slots.default() : null}
                {lastmodel.value ? <Teleport to="body">
                    <div class={[isfullscreen.value ? "" : "juzhong1","fixed inset-0 z-1000 bg-gray-400 bg-opacity-80"]}>
                        <div
                            class={[isfullscreen.value ? "absolute left-0 top-0 w-screen h-screen z-2000" : "min-w-600px w-1/2 max-h-9/10 rounded-2xl" ,  " flex flex-col relative bg-white border-2 border-black border-opacity-50  overflow-hidden"]}>
                            <div class="w-full bg-white flex relative border-b border-gray-400">
                                <div class="flex-1 h-10 text-left leading-10 pl-10px text-lg font-semibold">
                                    {typeof lastmodel.value.title === "function" ? lastmodel.value.title() :
                                        <span>{lastmodel.value.title}</span>}
                                </div>
                                <div class="h-10">
                                    <NIcon size={25} class="text-white hover:text-blue-500 bg-black cursor-pointer" onClick={removeLastModel}>
                                        <ArrowBackRound/>
                                    </NIcon>
                                    <NIcon size={25} class="text-white hover:text-blue-500 bg-black cursor-pointer" onClick={shauxin}>
                                        <MdRefresh/>
                                    </NIcon>
                                    <NIcon size={25} class="text-white hover:text-blue-500 bg-black cursor-pointer" onClick={setFullscreen}>
                                        <FullscreenTwotone/>
                                    </NIcon>
                                    <NIcon size={25} class="text-white hover:text-blue-500 bg-black cursor-pointer" onClick={clearmodellist}>
                                        <MdClose />
                                    </NIcon>
                                </div>
                            </div>
                            <div class={[isfullscreen.value ? "flex-1" : "" , "w-full py-2 px-10px overflow-y-auto"]}>
                                {lastmodel.value.content()}
                            </div>
                            <div class="w-full border-t border-gray-400 p-10px">
                                {lastmodel.value.footer ? lastmodel.value.footer() :
                                    <div class="w-full flex justify-end items-center">
                                        <NButton onclick={handleClick1}
                                                 class="mx-5px">{lastmodel.value?.cancelText || "取 消"}</NButton>
                                        <NButton onclick={handleClick2} type={"primary"}
                                                 class="mx-5px">{lastmodel.value?.okText || "确 认"}</NButton>
                                    </div>}
                            </div>
                            {lastmodel.value?.loading ?<div class="absolute inset-0 bg-gray-400 bg-opacity-30 juzhong1">
                                    <span>loading</span>
                                </div> : null}
                        </div>
                    </div>
                </Teleport> : null}
            </div>

        )
    },
})
